import { defineComponent, watch, shallowReactive, nextTick, ref, onUnmounted } from 'vue';
import * as echarts from 'echarts'

// 声明类型
const PropsType = {
  cdata: {
    type: Array,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 配置项
    let options = shallowReactive({    series: null })
    // 监听
    watch(
      () => props.cdata,
      (val: any) => {
        options = {
          series: [
            {
              type: 'gauge',
              center: ['50%', '60%'],
              startAngle: 182,
              endAngle: -2,
              min: 0,
              max: 3,
              splitNumber: 0,
              radius: '80%',
              itemStyle: {
                normal: {
                  color: function (params) {
                    let colorList = ['#000', '#F0E6FF']
                    return colorList[params.dataIndex]
                  }
                }

              },
              progress: {
                show: true,
                width: 5
              },
              pointer: {
                show: false
              },

              axisLine: {
                lineStyle: {
                  width: 5
                }
              },
              axisTick: {
                distance: -35,
                splitNumber: 5,
                lineStyle: {
                  width: 0,
                  color: '#000'
                }
              },
              splitLine: {
                distance: -30,
                length: 30,
                lineStyle: {
                  width: 8,
                  color: '#fff'
                }
              },
              axisLabel: {
                distance: 0,
                color: '#999',
                fontSize: 0
              },
              anchor: {
                show: false
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                width: '0%',
                lineHeight: 0,
                borderRadius: 0,
                offsetCenter: [0, '-60%'],
                fontSize: 0,
                fontWeight: 'bolder',
                formatter: '{value} °C',
                color: 'inherit'
              },
              data: [
                {
                  value: 1.8
                },
                {
                  value: 2.1
                },
              ]
            },
            {
              type: 'gauge',
              center: ['50%', '60%'],
              startAngle: 180,
              endAngle: 0,
              min: 0,
              max: 3,
              splitNumber: 20,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(153,255,0,0.5)'
                  }, {
                    offset: 1,
                    color: 'rgba(22,75,247,0.1)'
                  }])
                }
              },
              progress: {
                show: true,
                width: 20
              },
              pointer: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  width: 20
                }
              },
              axisTick: {
                distance: -35,
                splitNumber: 5,
                lineStyle: {
                  width: 0,
                  color: '#000'
                }
              },
              splitLine: {
                distance: -30,
                length: 30,
                lineStyle: {
                  width: 8,
                  color: '#fff'
                }
              },
              axisLabel: {
                distance: 0,
                color: '#999',
                fontSize: 0
              },
              anchor: {
                show: false
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                width: '0%',
                lineHeight: 0,
                borderRadius: 0,
                offsetCenter: [0, '-60%'],
                fontSize: 0,
                fontWeight: 'bolder',
                formatter: '{value} °C',
                color: 'inherit'
              },
              data: [
                {
                  value: 2.1
                }
              ]
            },
            {
              type: 'gauge',
              min: 0,
              max: 3,
              startAngle: 180,
              endAngle: 0,
              splitNumber: 6,
              center: ['50%', '60%'],
              radius: '30%',
              axisLine: {
                lineStyle: {
                  color: [[1, '#000']],
                  width: 3
                }
              },
              splitLine: {
                distance: -32,
                length: 28,
                lineStyle: {
                  color: '#000'
                }
              },
              axisTick: {
                distance: -20,
                length: 20,
                lineStyle: {
                  color: '#000'
                }
              },
              axisLabel: {
                distance: -50,
                color: '#000',
                fontSize: 20
              },
              anchor: {
                show: true,
                size: 1,
                itemStyle: {
                  borderColor: '#000',
                  borderWidth: 0
                }
              },
              pointer: {
                offsetCenter: [0, '10%'],
                icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                length: '%',
                itemStyle: {
                  color: '#000'
                }
              },
              detail: {
                valueAnimation: true,
                precision: 0.5
              },
              title: {
                offsetCenter: [0, '-60%']
              },
              data: [
                {
                  value: 2.1
                }
              ]
            },
            {
              type: 'gauge',
              center: ['50%', '60%'],
              startAngle: 182,
              endAngle: -2,
              min: 0,
              max: 3,
              splitNumber: 0,
              radius: '65%',
              itemStyle: {
                // borderColor: '#',
                color: '#F0E6FF',
                borderWidth: 0
              },
              progress: {
                show: true,
                width: 5
              },
              pointer: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  width: 5
                }
              },
              axisTick: {
                distance: -35,
                splitNumber: 5,
                lineStyle: {
                  width: 0,
                  color: '#000'
                }
              },
              splitLine: {

                distance: -30,
                length: 30,
                lineStyle: {
                  width: 8,
                  color: '#fff'
                }
              },
              axisLabel: {
                distance: 0,
                color: '#999',
                fontSize: 0
              },
              anchor: {
                show: false
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                width: '0%',
                lineHeight: 0,
                borderRadius: 0,
                offsetCenter: [0, '-60%'],
                fontSize: 0,
                fontWeight: 'bolder',
                formatter: '{value} °C',
                color: 'inherit'
              },
              data: [
                {
                  value: 3
                }
              ]
            },
          ]
        }
      },
      {
        immediate: true,
        deep: true
      }
    )
    return () => {
      const height = "360px"
      const width = "330px"

      return <div>
        <echart options={options} height={height} width={width} />
      </div>
    }
  }
})

